<template>
  <view class="deposit">
    <view class="deposit-background">
      <view class="deposit-banner">
        <p>押金（元）</p>
        <h3>{{amount}}</h3>
        <view class="deposit-btn">
          <van-button @click="refundDeposit" color="linear-gradient(#E9F2F8, #D3E6FB)">
            {{hasDepositState ? '退还押金' : '缴纳押金'}}
          </van-button>
        </view>
      </view>
    </view>
    <view class="deposit-detail">
      <p class="deposit-change">押金变动明细</p>
      <view class="deposit-detail-info" v-if="depositDetail.length > 0">
        <ul>
          <li v-for="(item, index) in depositDetail" :key="index">
            <view class="detail-left">
              <p>{{ item.orderType === 0 ? '充值押金' : '押金退还' }}</p>
              <text class="time">{{ item.createTime }}</text>
            </view>
            <view class="detail-money" :style="{color: item.orderType === 0 ? '#105BDE' : '#D30F0F'}">
              {{item.orderType === 0 ? '+' : '-'}}{{item.payedAmount}}
            </view>
          </li>
        </ul>
      </view>
      <view class="no-data" v-else>
        暂无数据
      </view>
    </view>

    <!-- 未完成订单弹窗 -->
    <van-dialog class="unfinishOrder"
      custom-style="top: 50% !important; left: 50%; width: 260px; transform: translate(-50%, -50%); border-radius: 10px;"
      :show-confirm-button="false" use-slot :show="showOrder" @close="showOrder = false">
      <unfinishOrder :dialogType="dialogType" :title="dialogTitle" :infoText="infoText" @handleSubmit="handleSubmit"
        @handleCancel="showOrder = false" />
    </van-dialog>
  </view>
</template>

<script>
  import {
    refundDeposit,
    listDepositOrder,
    getQueryDepositAmount,
    hasDeposit
  } from '@/api/order'
  import unfinishOrder from '@/component/unfinishOrder.vue'
  export default {
    data() {
      return {
        depositDetail: [
          // {
          //   createTime: '2023-03-27 12:01:12',
          //   money: '99.00',
          //   paid: true
          // },
          // {
          //   createTime: '2023-03-27 12:01:12',
          //   money: '99.00',
          //   paid: false
          // },
          // {
          //   createTime: '2023-03-27 12:01:12',
          //   money: '99.00',
          //   paid: true
          // },
          // {
          //   createTime: '2023-03-27 12:01:12',
          //   money: '99.00',
          //   paid: false
          // },
          // {
          //   createTime: '2023-03-27 12:01:12',
          //   money: '99.00',
          //   paid: true
          // }
        ],
        amount: '',
        hasDepositState: Boolean,
        showOrder: false,
        dialogType: 'deposit', // 弹窗类型
        dialogTitle: '押金退还', // 弹窗标题
        infoText: '确认是否申请退还押金？', // 弹窗文案
      }
    },
    components: {
      unfinishOrder
    },
    onShow() {
      this.getlistDepositOrder()
      this.getQueryDepositAmount()
      this.hasDeposit()
    },
    methods: {
      async hasDeposit() {
        const {
          data
        } = await hasDeposit({})
        this.hasDepositState = data
      },
      async getQueryDepositAmount() {
        const data = await getQueryDepositAmount()
        if (data.code === 200) this.amount = data.data
      },
      async getlistDepositOrder() {
        const data = await listDepositOrder()
        if (data.code === 200) {
          this.depositDetail = data.rows
        }
      },
      async handleSubmit() {
        await refundDeposit()
        uni.showToast({
          title: '已退还押金'
        })
        this.hasDeposit()
        this.getlistDepositOrder()
      },
      refundDeposit() {
        if (this.hasDepositState) {
          this.showOrder = true
        } else {
          uni.navigateTo({
            url: '/subpkg/payDeposit/index'
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .deposit {
    // background: linear-gradient(#C8E3F7, #D0E6FA, #B8D9F9);
    background-color: #F9F9F9;
    height: 100vh;

    .deposit-background {
      padding-top: 10px;
      background: linear-gradient(#C8E3F7, #D0E6FA, #B8D9F9);

      .deposit-banner {
        padding: 15px 60px;
        margin: 0 15px;
        box-sizing: border-box;
        height: 143px;
        background: url(@/static/images/depositBanner.png) 0 0 no-repeat;
        background-size: cover;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #FFFFFF;

        p {
          font-size: 14px;
        }

        h3 {
          font-family: 'DIN-Medium', sans-serif;
          font-size: 30px;
          margin-bottom: 8px;
        }

        .deposit-btn {
          width: 100%;

          ::v-deep .van-button {
            width: 100%;
            color: #006BD2 !important;
            border-radius: 20px;
            height: 38px !important;
          }
        }
      }
    }


    .deposit-detail {
      margin-top: -6px;
      background-color: #F9F9F9;
      border-radius: 15px 15px 0 0;
      padding: 22px 20px;
      border: unset;

      .deposit-change {
        font-family: 'PingFang-SC-Bold', sans-serif;
        font-size: 17px;
        color: #222222;
        font-weight: 700;
        margin-bottom: 12px;
      }

      .deposit-detail-info {
        background-color: #FFFFFF;
        padding: 17px 18px;

        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 35px;

          .detail-left {
            display: flex;
            flex-direction: column;

            p {
              color: #222222;
              font-size: 15px;
              margin-bottom: 8px;
            }

            .time {
              font-size: 11px;
              color: #666666;
            }
          }

          .detail-money {
            font-size: 18px;
            color: #105BDE;
            font-family: 'PingFang-SC-Bold', sans-serif;
          }
        }
      }
    }

    .unfinishOrder {
      ::v-deep .van-button--primary {
        flex: 1;
        border-radius: 10px;
        font-size: 15px;
      }

      ::v-deep .van-button--normal {
        border-radius: 10px;
        font-size: 15px;
      }

      ::v-deep .van-button {
        width: 100%;
      }
    }

    .no-data {
      height: 600rpx;
      background-color: #ffff;
      color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
